<template>
    <div>
        <div class="chart" ref="chart" :style="{ width: '98%', height: '100%' }"></div>
    </div>
</template>

<script>
import { totalPortSum, getDataCenterListNew } from "@/api/leftDetailList-apply"
import {getDataCenterAppList} from '@/api/map/newMap'
import * as echarts from 'echarts';

export default {
    data() {
        return {
            dataArr: [],
        }
    },
    mounted() {
        this.initPageTwo()
    },
    methods: {
        initPageTwo() {
            getDataCenterAppList().then((res) => {
                if (res.code === 200) {
                    this.dataArr = res.cloudSort;
                    // console.log('this.dataArr', this.dataArr);
                    this.renderChart(); // 获取数据后再渲染图表
                } else {
                    this.$message.error('获取数据失败！')
                }

            }).catch((err) => {
                console.log('err', err);
            })
        },

        renderChart() {
        const leftData = []
        const cloudServerCount = []
        const cloudConponentCount = []
        this.dataArr = this.dataArr.sort((a, b) => a.cloudServerCount - b.cloudServerCount);
        this.dataArr.forEach(res=>{
            leftData.push(res['availableAreas'])
            cloudConponentCount.push(res['cloudConponentCount'])
            cloudServerCount.push(res['cloudServerCount'])
        })


            // 初始化ECharts实例
            const myChart = echarts.init(this.$refs.chart);

            let option = {
                tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
                grid: {
                    left: '3%',
                    right: '6%',
                    top: '5%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: {//配置x轴，x轴和y轴互换
                    type: "value",       //值轴
                    axisTick: {
                        show: false // 不显示坐标轴刻度线
                    },
                    axisLine: {
                        show: false, // 不显示坐标轴线
                    },
                    axisLabel: {
                        show: false, // 不显示坐标轴上的文字
                    },
                    splitLine: {
                        show: false // 不显示网格线
                    },

                },
                yAxis: {//配置y轴
                    type: "category",   //类目轴
                    axisTick: {
                        show: false // 不显示坐标轴刻度线
                    },
                    axisLine: {
                        show: false, // 不显示坐标轴线
                    },
                    axisLabel: {//y轴文字的配置
                        textStyle: {
                            color: "white",//Y轴内容文字颜色
                        },
                    },
                    data: leftData
                },
                series: [//配置数据系列，一个图表可以配置多个数据系列
                    {
                        name: "云服务",
                        type: "bar",//数据系统的类型，即图表的类型。bar代表柱状状图   
                        tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                            trigger: 'axis',
                            backgroundColor: 'rgba(32, 33, 36,.7)',
                            borderColor: 'rgba(32, 33, 36,0.20)',
                            borderWidth: 1,
                            textStyle: { // 文字提示样式
                                color: '#fff',
                                fontSize: '12'
                            }
                        },

                        data: cloudServerCount,
                        // label: {
                        //     show: true, // 显示标签
                        //     position: 'right', // 标签位置顶部
                        //     color: "white"
                        // }，
                        label: {
          normal: {
            show: true, // 显示数值
            position: 'right', // 将数值放在柱子顶部
            color:'#fff',
            fontSize :9,
            formatter: function(params) {
                console.log(`output->params`,params)
              return  cloudServerCount[params.dataIndex] ; // 显示数值
            }
          }
        }
                    },
                    {
                        name: "云组件",
                        type: "bar",//数据系统的类型，即图表的类型。bar代表柱状状图
                        tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                            trigger: 'axis',
                            backgroundColor: 'rgba(32, 33, 36,.7)',
                            borderColor: 'rgba(32, 33, 36,0.20)',
                            borderWidth: 1,
                            textStyle: { // 文字提示样式
                                color: '#fff',
                                fontSize: '12'
                            }
                        },

                        data: cloudConponentCount,
                     
                        label: {
          normal: {
            position: 'right', // 将数值放在柱子顶部
            show: true, // 显示数值
            color:'#fff',
            fontSize :9,
            formatter: function(params) {
                console.log(`output->params`,params)
              return  cloudConponentCount[params.dataIndex] ; // 显示数值
            }
          }
        }
                    }
                ]
            };

            option && myChart.setOption(option);

            // 渲染图表
            myChart.setOption(option);
        }
    }
}
</script>

<style lang="less" scoped></style>
